/**
 * init
 */
var $items, itemWidth;
/**
 * 随机高度，随机图片，布局函数
 */
var wf = {
  // 返回随机高宽的图片
  rdmImg: function(){
    var width = Math.floor(Math.random() * 100) + 300,
        height = Math.floor(Math.random() * 500) + 300;
    return "http://placekitten.com/" + height + '/' + width;
  },
  // 进行排列
  arrange: function(){
      console.log("arrange")
    // 选取了所有的 div容器
    $items = document.querySelectorAll('#wf .photo-container');
    // 获取第一个容器的宽
    itemWidth = 167;

      debugger;
    // 获取视窗的宽
    var viewWidth = document.documentElement.clientWidth || document.body.clientWidth,
        // 计算出列
        // cols = Math.floor( viewWidth / itemWidth );
        cols = 2;

    // 存放每列当前长度的数组并初始化   // 如果两列 返回[0,0]
    var colsHeight = [];
    for(var i = 0; i< cols; i++){
        if( i == 1) {
            colsHeight.push(86);
        }else {
            colsHeight.push(0);
        }
     }

    // 遍历每一项item
    $items.forEach( function(ele, idx) {
    // 获取当前高度和当前列
    var curHeight = colsHeight[0], 
        col = 0;
    /*
        如果高度小于当前高度  那么当前高度就等于这个小的高度  并且当前列为高度较小的列 
        将当前div进行定位  top等于当前高度  left等于列*列数   
        当前列的高度为最后这个元素的高度
    */   
    for(var i = 0; i< colsHeight.length; i++){
        if(colsHeight[i] < curHeight){
            curHeight = colsHeight[i];
            col = i;
        }
    }
    ele.style.left = col * itemWidth  + 15 * (1 + col) + 'px'  ;
    if(col == 0) {
         ele.style.left = col * itemWidth  + 15  + 'px'  ;
    }
    if(col == 1) {
        ele.style.left = col * itemWidth  + 26  + 'px'  ;
    }
    ele.style.top = curHeight + 'px';
    colsHeight[col] += ele.offsetHeight;
    });
  },
}



// 获取图片
function getImgs() {
    var arr = new Array();
        for(var i= 0; i< 20; i++){
            var img = {};
            img.src = wf.rdmImg();
            arr.push(img);
        }
    return arr;
}

export default{
    data () {
      return {
        items: [],
        imgLength: 0,
        pageNum: 1,
        pageSize: 10
      }
    },

    created () {
        this.init();
    },
    methods: {
        init() {
            this.getList();
            this.$util.moreAndMoreOnscroll(this.getList, 'MoreAndMore')
        },
        getList() {
            let _this = this;
            var arr = getImgs();
            console.log(arr);
            _this.loadImg(arr , 0)
            //this.items = this.items.concat(arr);
            /**
             * 获取大赞北京列表
             */
            let param = {
                'pageNum': this.pageNum,
                'pageSize': this.pageSize
            }
            _this.$http.post('praisingCity/getPhotoList',param).then(function(rep){
                
            }).catch(function(err){

            })   
        },
        /**
         * 加载图片
         * @param {*} arr 
         * @param {*} index 
         */
        loadImg(arr,index){
          let _this = this;
          let img = new Image();
          img.src=arr[index].src ;
          img.onload=function(){
              _this.items.push( arr[index] )
              if(index < arr.length){
                _this.loadImg(arr,index + 1)
              }
          }
        },
        /**
         * 排列组合
         */
        arrange() {
              wf.arrange();
        },

        /**
         * 点赞  
         */    
        praise(item) {
            let _this = this;
            let param = {
                "id": item.id
            }
            _this.$http.post('praisingCity/praise',param).then(function(){
            }).catch(function() {

            })
        } 
    }
}